<template >
  <!-- 风格，面积，特征一样，故抽离出同一个组件 -->
  <div class="select-tag" v-show="showPopup">
    <div class="filter-option">
      <div class="title">{{title}}</div>
      <div class="select-tag">
        <div
          class="item-wrapper"
          :class="selectVal===item[subItem]?'active':''"
          v-for="(item,index) in Tag"
          :key="index"
          @click="selectedTag(item[subItem],item.id || item.ID)"
        >
          <div class="item">{{item[subItem]}}</div>
        </div>
      </div>
    </div>
    <div class="btn-wrapper">
      <div class="btn sure" @click="sonBtnFn()">确定</div>
    </div>
  </div>
</template>

<script>
export default {
  // 当前弹框 需要显示的弹框， 渲染的标签 标签的子项 选中的子项
  props: {
    title: {
      type: String
    },
    showPopup: {
      type: Boolean,
      default: false
    },
    Tag: {
      // 必填项
      type: Array,
      required: true
    },
    subItem: {
      type: String
    },
    activeItem: {
      type: String
    }
  },
  data () {
    return {
      selectVal: '',
      id: 0
    }
  },

  methods: {
    sonBtnFn () {
      // 触发父组件的点击事件
      // 拿到后台需要的id || ID
      this.$emit('btnFn', [this.selectVal, this.id])
    },
    // 标签选中事件
    selectedTag (val, id) {
      this.selectVal = val
      this.id = id
    }
  },

  created () {
    this.selectVal = this.activeItem
  }
}
</script>

<style lang='stylus' scoped>
.select-tag
  .filter-option, padding 0.06rem 0.18rem, .title
    padding 0 0 0.08rem 0
    color #333
    line-height 0.13rem
    font-weight 700
    text-align center
  .select-tag
    display flex
    flex-wrap wrap
    .item-wrapper
      width 25%
      padding 0.05rem 0
      .item
        margin 0 auto
        width 0.75rem
        height 0.25rem
        line-height 0.25rem
        border solid 0.01rem #ccc
        color #999
        font-size 0.11rem
        text-align center
        border-radius 0.02rem
    .active
      .item
        background-color #bbe4f8
        border solid 0.01rem #1da7e8
        color #1da7e8
.btn-wrapper
  padding 0.16rem
  .btn
    display flex
    align-items center
    justify-content center
    margin 0 auto
    width 2.2rem
    line-height 0.39rem
    color #fff
    font-size 0.14rem
    font-weight 700
    background-color #1da7e8
    border-radius 0.05rem
    text-align center
</style>
